import 'package:flutter/material.dart';

class ClipRoute extends StatefulWidget {
  const ClipRoute({Key? key}) : super(key: key);

  @override
  _ClipRouteState createState() => _ClipRouteState();
}

class _ClipRouteState extends State<ClipRoute> {
  @override
  Widget build(BuildContext context) {
    Image avatar = Image.asset("assets/images/avatar.png", width: 60.0);
    return Scaffold(
      appBar: AppBar(
        title: const Text('clip裁剪布局'),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          avatar,
          ClipOval(child: avatar),
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: avatar,
          ),
          ClipPath(
            child: avatar,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                widthFactor: .5, //宽度设为原来宽度一半，另一半会溢出,但会显示
                child: avatar,
              ),
              const Text(
                "你好世界",
                style: TextStyle(color: Colors.green),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRect(
                //将溢出部分剪裁
                child: Align(
                  alignment: Alignment.topLeft,
                  widthFactor: .5, //宽度设为原来宽度一半
                  child: avatar,
                ),
              ),
              const Text("你好世界", style: TextStyle(color: Colors.green))
            ],
          ),
          DecoratedBox(
            decoration: const BoxDecoration(color: Colors.red),
            child: ClipRect(
              clipper: MyClipper(),
              child: avatar,
            ),
          ),
          DecoratedBox(
            decoration: const BoxDecoration(color: Colors.red),
            child: MyClipRect(
              child: avatar,
            ),
          )
        ],
      ),
    );
  }
}

class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => const Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}

class MyClipRect extends StatelessWidget {
  const MyClipRect({Key? key, required this.child}) : super(key: key);
  final Widget child;
  @override
  Widget build(BuildContext context) {
    var rect = const Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);
    return ClipRRect(
      child: SizedBox(
        width: rect.width,
        height: rect.height,
        child: OverflowBox(
          maxWidth: double.infinity,
          maxHeight: double.infinity,
          child: child,
        ),
      ),
    );
  }
}
